<template>
  <div ref="chartRef" style="width: 800px; height: 600px;"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';

const chartRef = ref(null);

function getVirtualData(year) {
  const date = +echarts.time.parse(year + '-01-01');
  const end = +echarts.time.parse((+year + 1) + '-01-01');
  const dayTime = 3600 * 24 * 1000;
  const data = [];
  for (let time = date; time < end; time += dayTime) {
    data.push([
      echarts.time.format(time, '{yyyy}-{MM}-{dd}', false),
      Math.floor(Math.random() * 1000)
    ]);
  }
  return data;
}

onMounted(() => {
  const myChart = echarts.init(chartRef.value);

  const option = {
    tooltip: {
      position: 'top',
      formatter: function (p) {
        const format = echarts.time.format(p.data[0], '{yyyy}-{MM}-{dd}', false);
        return format + ': ' + p.data[1];
      }
    },
    visualMap: {
      min: 0,
      max: 1000,
      calculable: true,
      orient: 'vertical',
      left: '250',
      top: 'center',
      color: ['#23C343', '#4CD263', '#7BE188', '#AFF0B5', '#E8FFEA']
    },
    calendar: [
      {
        orient: 'vertical',
        range: '2025'
      }
    ],
    series: [
      {
        type: 'heatmap',
        coordinateSystem: 'calendar',
        calendarIndex: 0,
        data: getVirtualData('2025'),
        itemStyle: {
          color: function (params) {
            const value = params.value;
            const colorRange = option.visualMap.color;
            const len = colorRange.length - 1;
            const min = option.visualMap.min;
            const max = option.visualMap.max;
            const rangeStep = (max - min) / len;
            const index = Math.floor((value - min) / rangeStep);
            return colorRange[index];
          }
        }
      }
    ]
  };

  myChart.setOption(option);
});
</script>

<style scoped>
/* 可以根据需要添加样式 */
</style>